<template>
  <div class="MatchSignUp">
   <div class="TopBar">
     <div style="display: flex;">
       <div>赛事名称：</div>
       <div style="font-weight: bold;">XXX2018超级联赛</div>
     </div>
     <div style="display: flex;">
       裁判长：张三</div>
     <div>
      <el-button type="primary" size="medium">导入报名信息</el-button>
      <el-button type="primary" size="medium">导出报名信息</el-button>
      <el-button type="primary" size="medium">导出签到信息</el-button>
     </div>
   </div>
    <div class="Content" style="margin-top: 30px">
      <div class="ContentSelect">
       <div class="Team">
         <div>组别：</div>
         <el-select v-model="TeamsSelect" size="small" placeholder="青年组男单" style="width: 50%;">
           <el-option
             v-for="team in Teams"
             :key="team"
             :label="team"
             :value="team">
           </el-option>
         </el-select>
       </div>
        <div class="Team">
          <div>省份：</div>
          <el-select v-model="ProvinceSelect" size="small" placeholder="湖北省" style="width: 50%;">
            <el-option
              v-for="province in Province"
              :key="province"
              :label="province"
              :value="province">
            </el-option>
          </el-select>
        </div>
        <div class="Team">
          <div>关键字：</div>
          <el-input
            size="small"
            placeholder="请输入名字/电话号码"
            v-model="SearchInput" style="width: 70%">
          </el-input>
        </div>
        <el-button type="primary" round size="medium">搜索</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="margin-top: 30px;padding-left: 165px;">
        <!--<el-table-column-->
          <!--width="100">-->
        <!--</el-table-column>-->
        <el-table-column label="签到" width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.radio"
              active-color="#409EFF">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="team"
          label="项目-组别"
          width="120">
        </el-table-column>
        <el-table-column
          prop="Identity"
          label="身份证号"
          width="180"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="120">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="date"
          label="报名时间 "
          width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="修改报名信息" :visible.sync="ShowChange" width="25%">
        <div class="Team" style="margin-bottom: 30px;">
         <div>姓名：</div>
         <div>{{ModelChange.name}}</div>
        </div>
        <div class="Team" style="margin-bottom: 30px;">
          <div>项目-组别：</div>
          <el-select v-model="ChangeTeam" :placeholder="ModelChange.team" size="small" style="width: 150px;">
            <el-option
              v-for="team in Teams"
              :key="team"
              :label="team"
              :value="team">
            </el-option>
          </el-select>
        </div>
        <div class="Team">
          <div>省份：</div>
          <el-select v-model="ChangeProvince" :placeholder="ModelChange.province" size="small" style="width: 150px;">
            <el-option
              v-for="province in Province"
              :key="province"
              :label="province"
              :value="province">
            </el-option>
          </el-select>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="ShowChange = false">取 消</el-button>
          <el-button type="primary" @click="ConfirmChange">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div style="justify-content: center;display: flex;margin-top: 50px;">
      <el-button round style="width: 150px;margin-right: 50px;" type="primary" @click="ConfirmSign">确定签到</el-button>
      <el-button round style="width: 150px;" type="primary" plain @click="Back">返回</el-button>
    </div>
  </div>
</template>

<script>
    export default {
        name: "MatchSignUp",
      data(){
          return{
            Teams:['青年组男单','青年组女单','青年组男双','青年组女双'],
            TeamsSelect:'',
            Province:['湖北省','湖南省','河南省','河北省','四川省'],
            ProvinceSelect:'',
            SearchInput:'',
            ShowChange:false,
            ModelChange:{},
            ModelChangeID:'',
            ChangeTeam:'',
            ChangeProvince:'',
            tableData: [{
              id:'1',
              club:'461俱乐部',
              match:'2017招商银行职工联赛',
              name:'王五',
              date: '2016-05-02',
              state:'已结束',
              sign:'1',
              team:'青年组男单',
              Identity:'320100197705061234',
              sex:'男',
              age:'23',
              phone:'13868484512',
              province:'湖北省',
              radio:false,

            }, {
              id:'2',
              club:'461俱乐部',
              match:'2017招商银行职工联赛',
              name:'王五',
              date: '2016-05-04',
              state:'正在比赛',
              sign:'0',
              team:'青年组男双',
              Identity:'320100197705061234',
              sex:'女',
              age:'25',
              phone:'13868484512',
              province:'湖南省',
              radio:false,
            }, {
              id:'3',
              club:'461俱乐部',
              match:'2018东风杯挑战赛',
              name:'李四',
              date: '2016-05-01',
              state:'已发布',
              sign:'1',
              team:'青年组女单',
              Identity:'320100197705061234',
              sex:'男',
              age:'26',
              phone:'13868484512',
              province:'河北省',
              radio:false,
            }, {
              id:'4',
              club:'461俱乐部',
              match:'xxx2018超级联赛',
              name:'张三',
              date: '2016-05-03',
              state:'未发布',
              sign:'0',
              team:'青年组女双',
              Identity:'320100197705061234',
              sex:'女',
              age:'29',
              phone:'13868484512',
              province:'河南省',
              radio:false,
            }]
          }
      },
      methods:{
        handleEdit:function (index,item) {
          this.ShowChange = true
          this.ModelChange = item
          this.ModelChangeID = index
        },
        ConfirmChange:function () {
          this.ShowChange = false
          this.tableData[this.ModelChangeID].province = this.ChangeProvince
          this.tableData[this.ModelChangeID].team = this.ChangeTeam
        },
        ConfirmSign:function () {

        },
        Back:function () {
            console.log(this.tableData)
        }
    },
    }
</script>

<style scoped>
.MatchSignUp{
  width: 90%;
  margin-top: 50px;
  margin-left: 40px;
  display: flex;
  flex-direction: column;
}
.TopBar{
 display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #93C6FA;
}
.ContentSelect{
    display: flex;
    justify-content: space-evenly;
}
.Team{
  display: flex;
  align-items: center;
  width: 230px;
}
</style>
